<template>
  <el-container style="height: 100vh">
    <el-aside :style="asideStyle" class="my-aside">
      <el-menu :default-active="defaultActive" :collapse="collapse" :collapse-transition="false" router background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" >
        <el-menu-item index="about">
          <i class="el-icon-s-home"></i>
          <span slot="title">后台首页</span>
        </el-menu-item>
        <template v-if="role === 1">
          <el-submenu index="manager">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item index="userinfo" v-if="userId === 1">
              <i class="el-icon-user-solid"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="ad">
              <i class="el-icon-data-analysis"></i>
              <span slot="title">轮播管理</span>
            </el-menu-item>
            <el-menu-item index="notice">
              <i class="el-icon-link"></i>
              <span slot="title">公告管理</span>
            </el-menu-item>
            <el-menu-item index="feedback">
              <i class="el-icon-s-platform"></i>
              <span slot="title">意见反馈</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="vip">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>会员管理</span>
            </template>
            <el-menu-item index="vip">
              <i class="el-icon-user-solid"></i>
              <span slot="title">读者管理</span>
            </el-menu-item>
            <el-menu-item index="author">
              <i class="el-icon-data-analysis"></i>
              <span slot="title">作者管理</span>
            </el-menu-item>
          </el-submenu>
        </template>
        <el-submenu index="bm">
          <template slot="title">
            <i class="el-icon-s-tools"></i>
            <span>小说管理</span>
          </template>
          <el-menu-item index="category" v-if="role === 1">
            <i class="el-icon-user-solid"></i>
            <span slot="title">分类管理</span>
          </el-menu-item>
          <el-menu-item index="book">
            <i class="el-icon-data-analysis"></i>
            <span slot="title">小说管理</span>
          </el-menu-item>
          <el-menu-item index="comment">
            <i class="el-icon-data-analysis"></i>
            <span slot="title">评论管理</span>
          </el-menu-item>
          <el-menu-item index="like">
            <i class="el-icon-data-analysis"></i>
            <span slot="title">收藏管理</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="background-color: #545c64;height: 56px;" class="my-header">
        <el-row style="height: 100%">
          <el-col :span="1">
            <i :class="iconClassName" :title="iconTitleText" @click="changeCollapse" style="color: #fff"></i>
          </el-col>
          <el-col :span="6" :offset="17" style="display: flex;align-items: center;justify-content: right;">
            <el-dropdown trigger="click">
              <div style="margin-right: 15px;">
                <span style="color: #fff">当前用户</span>
                <el-tag effect="dark" style="margin-left: 5px;cursor: pointer">{{ nickname }}</el-tag>
              </div>
              <el-dropdown-menu>
                <el-dropdown-item @click.native="openDialog">个人信息</el-dropdown-item>
                <el-dropdown-item @click.native="updatePassword">修改密码</el-dropdown-item>
                <el-dropdown-item divided @click.native="confirmLogout">退出系统</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
    <UserinfoUpdate ref="userinfoUpdate" @onCloseDialog="getUser"/>
    <UserinfoPassword ref="userinfoPassword" @onCloseDialog="logout"/>
  </el-container>
</template>

<script>
import UserinfoUpdate from '@/views/admin/userinfo/UserinfoUpdate.vue'
import UserinfoPassword from '@/views/admin/userinfo/UserinfoPassword.vue'
export default {
  name: 'HomeView',
  components: { UserinfoUpdate, UserinfoPassword },
  data () {
    return {
      iconClassName: 'el-icon-s-fold',
      iconTitleText: '收起',
      collapse: false,
      asideStyle: {
        width: '200px'
      },
      userId: '',
      nickname: '昵称',
      username: '用户名',
      role: '',
      defaultActive: 'about'
    }
  },
  watch: {
    $route (to) {
      this.setDefaultActive(to.path)
    }
  },
  methods: {
    changeCollapse () {
      this.collapse = !this.collapse
      this.iconTitleText = this.collapse ? '展开' : '收起'
      this.asideStyle.width = this.collapse ? '60px' : '200px'
      this.iconClassName = this.collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
    },
    getUser () {
      this.$http.get('userinfo/info').then(data => {
        this.userId = data.data.userId
        this.nickname = data.data.nickname
        this.role = data.data.role
      })
    },
    logout () {
      this.$http.get('logout').then(() => {
        this.$cookies.remove('token')
        this.$router.replace('/login')
      })
    },
    confirmLogout () {
      this.$confirm('确定退出系统吗？').then(() => {
        this.logout()
      }).catch(() => {})
    },
    setDefaultActive (path) {
      const ps = path.split('/')
      this.defaultActive = ps[ps.length - 1]
    },
    openDialog () {
      this.$refs.userinfoUpdate.init(this.userId)
    },
    updatePassword () {
      this.$refs.userinfoPassword.init()
    }
  },
  created () {
    this.$nextTick(() => {
      this.getUser()
      this.setDefaultActive(this.$route.path)
    })
  }

}
</script>
<style scoped lang="scss">
.my-aside{
  background-color: #545c64;
}
.my-header{
  & > div{
    display: flex;
    align-items: center;
  }
  i{
    cursor: pointer;
    font-size: 20px;
  }
}
</style>
<style>
.el-menu{
  border: none !important;
}
</style>
